<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello mdui</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="../../statics/common/js/header.js"></script>
		<link rel="stylesheet" href="../../statics/mdui/css/mdui.min.css">
		<script src="../../statics/mdui/js/mdui.min.js"></script>
		<style>
			html,body {
				background-color: #efeff4;
			}
		</style>
		<script>
			mdui.init({
				swipeBack:true //启用右滑关闭功能
			});
		</script>
	</head>
	<body>
		<div class="mdui-content">
			<header class="mdui-bar mdui-bar-nav">
				<a class="mdui-action-back mdui-icon mdui-icon-left-nav mdui-pull-left"></a>
				<h1 class="mdui-title">modal（弹出窗口）</h1>
			</header>
			<div class="mdui-content">
				<a href="#modal" class="mdui-btn mdui-btn-primary mdui-btn-block">Click</a>
			</div>
			<div id="modal" class="mdui-modal">
				<header class="mdui-bar mdui-bar-nav">
					<a class="mdui-icon mdui-icon-close mdui-pull-right" href="#modal"></a>
					<h1 class="mdui-title">Modal</h1>
				</header>
				<div class="mdui-content" style="height: 100%;">
					<p class="mdui-content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
				</div>
			</div>
		</div>
	</body>

</html>